<!-- 表单配置 -->
<template>
    <div class="form-config-container">
        <!-- 搜索区域 -->
        <div class="search-area">
            <el-form :inline="true" :model="searchForm" class="search-form">
                <el-form-item label="表单名称">
                    <el-input v-model="searchForm.formName" placeholder="请输入表单名称" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch">
                        <el-icon><Search /></el-icon>搜索
                    </el-button>
                    <el-button @click="handleReset">
                        <el-icon><Refresh /></el-icon>重置
                    </el-button>
                    <el-button type="success" @click="handleAdd">
                        <el-icon><Plus /></el-icon>新增
                    </el-button>
                    <el-button type="danger" :disabled="!selectedRows.length" @click="handleBatchDelete">
                        <el-icon><Delete /></el-icon>删除
                    </el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 表格区域 -->
        <el-table
            v-loading="loading"
            :data="tableData"
            @selection-change="handleSelectionChange"
            border
            style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column type="index" label="序号" width="80" />
            <el-table-column prop="id" label="表单主键" min-width="180" />
            <el-table-column prop="formName" label="表单名称" min-width="180" />
            <el-table-column prop="desc" label="备注" min-width="200" />
            <el-table-column label="操作" width="250" fixed="right">
                <template #default="{ row }">
                    <el-button type="primary" link @click="handleDetail(row)">
                        <el-icon><View /></el-icon>详情
                    </el-button>
                    <el-button type="primary" link @click="handleEdit(row)">
                        <el-icon><Edit /></el-icon>修改
                    </el-button>
                    <el-button type="danger" link @click="handleDelete(row)">
                        <el-icon><Delete /></el-icon>删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 表单预览对话框 -->
        <el-dialog
            v-model="previewVisible"
            title="表单预览"
            width="70%"
            :close-on-click-modal="false"
            destroy-on-close>
            <div class="form-preview-container">
                <v-form-render
                    v-if="previewVisible"
                    :form-json="currentFormJson"
                    :form-data="{}"
                    :option-data="{}"
                    :disabled="true"
                    @submit="handlePreviewSubmit"
                />
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="previewVisible = false">关闭</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 分页区域 -->
        <div class="pagination-container">
            <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[10, 20, 50, 100]"
                :total="total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<script>
import { Search, Refresh, Plus, Delete, View, Edit } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { VFormRender } from 'vform3-builds'
import 'vform3-builds/dist/designer.style.css'

export default {
    name: 'FormConfig',
    components: {
        Search,
        Refresh,
        Plus,
        Delete,
        View,
        Edit,
        VFormRender
    },
    data() {
        return {
            // 搜索表单数据
            searchForm: {
                formName: ''
            },
            // 表格数据
            loading: false,
            tableData: [],
            selectedRows: [],
            currentPage: 1,
            pageSize: 10,
            total: 0,
            // 预览相关数据
            previewVisible: false,
            currentFormJson: null
        }
    },
    created(){
        this.handleSearch()
    },
    methods: {
        // 搜索方法
        handleSearch() {
            // TODO: 实现搜索逻辑
            this.$post('/findFormConfig',this.searchForm).then(res =>{
                this.tableData = res.data
            }).catch(err =>{
                console.log(err);
            })
        },
        // 重置方法
        handleReset() {
            this.searchForm.formName = ''
            this.handleSearch()
        },
        // 新增方法
        handleAdd() {
            this.$router.push('/workflow/form-design')
        },
        // 批量删除方法
        handleBatchDelete() {
            if (this.selectedRows.length === 0) {
                ElMessage.warning('请选择要删除的数据')
                return
            }
            ElMessageBox.confirm(
                `确认删除选中的 ${this.selectedRows.length} 条数据吗？`,
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }
            ).then(() => {
                // TODO: 实现批量删除逻辑
                console.log('批量删除的数据：', this.selectedRows)
            })
        },
        // 表格选择变化
        handleSelectionChange(selection) {
            this.selectedRows = selection
        },
        // 详情方法
        handleDetail(row) {
            try {
                // 解析表单JSON
                const formJson = typeof row.formJson === 'string' ? JSON.parse(row.formJson) : row.formJson
                this.currentFormJson = formJson
                this.previewVisible = true
            } catch (error) {
                console.error('表单JSON解析失败：', error)
                ElMessage.error('表单数据格式错误，无法预览')
            }
        },
        // 预览表单提交
        handlePreviewSubmit(formData) {
            console.log('预览表单数据：', formData)
            ElMessage.info('预览模式下不支持提交')
        },
        // 修改方法
        handleEdit(row) {
            // TODO: 实现修改逻辑
            console.log('修改数据：', row)
        },
        // 删除方法
        handleDelete(row) {
            ElMessageBox.confirm(
                '确认删除该条数据吗？',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }
            ).then(() => {
                // TODO: 实现删除逻辑
                console.log('删除数据：', row)
            })
        },
        // 分页方法
        handleSizeChange(val) {
            this.pageSize = val
            this.handleSearch()
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.handleSearch()
        },
        // 获取表单 JSON 数据
        getFormJson(row) {
            return this.$get('/getFormJson')
        }
    }
}
</script>

<style scoped>
.form-config-container {
    padding: 20px;
}

.search-area {
    margin-bottom: 20px;
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
}

.pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

:deep(.el-button .el-icon) {
    margin-right: 4px;
}

.form-preview-container {
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
    min-height: 400px;
    max-height: 70vh;
    overflow-y: auto;
}

:deep(.form-render) {
    max-width: 800px;
    margin: 0 auto;
}
</style>